<template>
  <view>
    <toast ref="toast"/>
    <loading ref="loading" fullscreen/>

    <view class="home-container">
      <view class="top-tabs-container">
        <view class="u-tabs-container">
          <u-tabs
            :list="menuTabs"
            :is-scroll="false"
            :current="currentTab"
            active-color="#f4756b"
            :bar-height="8"
            :font-size="32"
            @change="handleTabsChange" />
        </view>
      </view>
      <view class="waterfall-container">
        <u-waterfall v-model="flowList" ref="uWaterfall">
          <template v-slot:left="{leftList}">
            <view class="post-item-container__default post-item-container__left" v-for="(item, index) in leftList" :key="index" @click="handlePostClick(item.postId)">
              <u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
              <view class="demo-title">
                {{item.title}}
              </view>
              <view class="demo-username">
                <view class="avatar-container">
                  <image :src="item.postId !== 0 ? specAvatar : defaultAvatar" mode="aspectFill"/>
                </view>
                <text>{{item.username}}</text>
              </view>
            </view>
          </template>
          <template v-slot:right="{rightList}">
            <view class="post-item-container__default post-item-container__right" v-for="(item, index) in rightList" :key="index" @click="handlePostClick(item.postId)">
              <u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
              <view class="demo-title">
                {{item.title}}
              </view>
              <view class="demo-username">
                <view class="avatar-container">
                  <image :src="item.postId !== 0 ? specAvatar : defaultAvatar" mode="aspectFill"/>
                </view>
                <text>{{item.username}}</text>
              </view>
            </view>
          </template>
        </u-waterfall>
        <u-loadmore bg-color="#fff" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
      </view>
      <view class="write-btn-container" @click="toEditPost">
        <image src="../../static/images/plus.png"></image>
      </view>
    </view>
    <u-tabbar v-model="currentTabPage" :list="tabbarList" active-color="#f4756b" inactive-color="#888" @change="changeTabPage"></u-tabbar>
  </view>
</template>

<script>
    import navigationBar from '@/components/navigationBar/navigationBar.vue';
    import toast from '@/components/toast/toast.vue';
    import loading from '@/components/loading/loading.vue';
    import {getDiscussList} from "@/common/js/api/models";

    export default {
        name: "home",
        components: {
            navigationBar, toast, loading,
        },
        data() {
            return {
                currentTab: 0,
                menuTabs: [
                    {
                        name: '推荐'
                    },{
                        name: '计算机系'
                    }
                ], //菜单标签
                postList: [],
                loadStatus: 'loadmore',
                flowList: [],
                list: [
                    {
                        postId: 0,
                        title: 'Java难不难兄弟们',
                        username: 'Cowjiang',
                        image: 'https://com-etw.oss-cn-guangzhou.aliyuncs.com/dynamic/12/fbeaab927f124a7880c1c8491708d924.png',
                    },
                    {
                        postId: 0,
                        title: 'JS是世界上最好的语言',
                        username: 'Cowjiang',
                        image: 'https://com-etw.oss-cn-guangzhou.aliyuncs.com/dynamic/12/1aa89bdf98a2423bb2aeb5ec448f75cd.png',
                    },
                    {
                        postId: 0,
                        title: 'PHP才是最好的',
                        username: 'Cowjiang',
                        image: 'https://com-etw.oss-cn-guangzhou.aliyuncs.com/dynamic/12/f613b87728344c87a751207fa21c1fe8.png',
                    },
                    {
                        postId: 0,
                        title: '我C++不服',
                        username: 'Cowjiang',
                        image: 'https://com-etw.oss-cn-guangzhou.aliyuncs.com/dynamic/12/e5a0310ee0024e1b9f94617bdf9750b7.png',
                    },
                    {
                        postId: 0,
                        title: '今非昔比重新开张啦',
                        username: 'Cowjiang',
                        image: 'https://com-etw.oss-cn-guangzhou.aliyuncs.com/dynamic/12/32e61d0a66e04b1d9181e3a23a8303c8.png',
                    },
                    {
                        postId: 0,
                        username: 'Cowjiang',
                        title: '这道题有人会做吗',
                        image: 'https://com-etw.oss-cn-guangzhou.aliyuncs.com/dynamic/12/0fc53cc190884754abcbaa7110bf6dff.jpg',
                    },
                    {
                        postId: 0,
                        username: 'Cowjiang',
                        title: '有人教我Java吗',
                        image: 'https://com-etw.oss-cn-guangzhou.aliyuncs.com/dynamic/12/0fc53cc190884754abcbaa7110bf6dff.jpg',
                    },
                    {
                        postId: 0,
                        title: '软件工程大作业',
                        username: 'Cowjiang',
                        image: 'https://com-etw.oss-cn-guangzhou.aliyuncs.com/dynamic/12/32e61d0a66e04b1d9181e3a23a8303c8.png',
                    },
                    {
                        postId: 0,
                        title: '周五下午有没有课',
                        username: 'Cowjiang',
                        image: 'https://com-etw.oss-cn-guangzhou.aliyuncs.com/dynamic/12/4b86bdacc7594607aa0e0002342ca8e6.png',
                    },
                    {
                        postId: 0,
                        title: '新生军训',
                        username: 'Cowjiang',
                        image: 'https://com-etw.oss-cn-guangzhou.aliyuncs.com/dynamic/12/92b5878904bb4477809929cb5d96df44.png',
                    },
                    {
                        postId: 0,
                        title: '测试了一下还可以',
                        username: 'Cowjiang',
                        image: 'https://com-etw.oss-cn-guangzhou.aliyuncs.com/dynamic/12/0fc53cc190884754abcbaa7110bf6dff.jpg',
                    },
                ],
                currentPage: 1,
                defaultAvatar: 'https://com-etw.oss-cn-guangzhou.aliyuncs.com/dynamic/12/32e61d0a66e04b1d9181e3a23a8303c8.png',
                specAvatar: 'https://com-etw.oss-cn-guangzhou.aliyuncs.com/user-avatar/1/3876f256ca244d588605da3903a1628d.png',
                tabbarList: [
                    {
                        iconPath: "home",
                        selectedIconPath: "home-fill",
                        text: '社区',
                        customIcon: false,
                    },
                    {
                        iconPath: "bookmark",
                        selectedIconPath: "bookmark-fill",
                        text: '课程',
                        customIcon: false,
                    },
                    {
                        iconPath: "chat",
                        selectedIconPath: "chat-fill",
                        text: '消息',
                        customIcon: false,
                    },
                    {
                        iconPath: "account",
                        selectedIconPath: "account-fill",
                        text: '我的',
                        customIcon: false,
                    },
                ],
                currentTabPage: 0
            }
        },
        onReachBottom() {
            this.loadStatus = 'loading';
            // 模拟数据加载
            setTimeout(() => {
                this.addRandomData();
                this.loadStatus = 'loadmore';
            }, 1000)
        },
        methods: {
            getPostList(faculty, page) {
                getDiscussList({
                    queryData: {
                        faculty: faculty,
                        page: page,
                        limit: 50
                    }
                }).then(res => {
                    console.log(res);
                }).catch(err => {
                    console.log(err);
                    if (err.data.code === 200) {
                        const postData = err.data.discussPosts;
                        postData.forEach(item => {
                            this.list.unshift({
                                postId: item.post.id,
                                title: item.post.title,
                                username: item.user.name,
                                image: item.post.images,
                            });
                        });
                        this.addRandomData();
                    }
                })
            },
            // 切换菜单标签
            handleTabsChange(index) {
                this.currentTab = index;
                this.$refs.loading.startLoading();
                this.clear();
                setTimeout(() => {
                    this.addRandomData();setTimeout(() => {
                        this.$refs.loading.stopLoading();
                    }, 1000);
                }, 500);
            },
            addRandomData() {
                for(let i = 0; i < 10; i++) {
                    let index = this.$u.random(0, this.list.length - 1);
                    let item = JSON.parse(JSON.stringify(this.list[index]))
                    item.id = this.$u.guid();
                    this.flowList.push(item);
                }
            },
            clear() {
                this.$refs.uWaterfall.clear();
            },
            handlePostClick(id) {
                if (id !== 0) {
                    uni.redirectTo({
                        url: `/pages/postDetail/postDetail?id=${id}`
                    });
                }
            },
            toEditPost() {
                uni.navigateTo({
                    url: `/pages/editPost/editPost`
                });
            },
            changeTabPage(index) {
                switch (index) {
                    case 0:
                        uni.redirectTo({
                            url: `/pages/home/home`
                        });
                        break;
                    case 1:
                        uni.redirectTo({
                            url: `/pages/class/class`
                        });
                        break;
                    case 2:
                        uni.redirectTo({
                            url: `/pages/chatList/chatList`
                        });
                        break;
                    case 3:
                        uni.redirectTo({
                            url: `/pages/me/me`
                        });
                        break;
                }
            }
        },
        mounted() {
            this.$refs.loading.startLoading();
            setTimeout(() => {
                this.$refs.loading.stopLoading();
            }, 2000);
            this.getPostList(0, 1);
        }
    }
</script>

<style lang="scss" scoped>
  @import 'home.scss';
</style>

<style>
  /* page不能写带scope的style标签中，否则无效 */
  page {
    background-color: rgb(240, 240, 240);
  }
</style>

<style lang="scss" scoped>
  .post-item-container__default {
    border-radius: 8px;
    margin: 10rpx 24rpx;
    background-color: #ffffff;
    padding: 8px;
    position: relative;
  }

  .post-item-container__left {
    margin-right: 0;
  }

  .post-item-container__right {
    margin-left: 0;
  }

  .u-close {
    position: absolute;
    top: 32rpx;
    right: 32rpx;
  }

  .demo-image {
    width: 100%;
    border-radius: 30rpx;
  }

  .demo-title {
    font-size: 30rpx;
    margin-top: 5px;
    color: $u-main-color;
  }

  .demo-tag {
    display: flex;
    margin-top: 5px;
  }

  .demo-tag-owner {
    background-color: $u-type-error;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 4rpx 14rpx;
    border-radius: 50rpx;
    font-size: 20rpx;
    line-height: 1;
  }

  .demo-tag-text {
    border: 1px solid $u-type-primary;
    color: $u-type-primary;
    margin-left: 10px;
    border-radius: 50rpx;
    line-height: 1;
    padding: 4rpx 14rpx;
    display: flex;
    align-items: center;
    border-radius: 50rpx;
    font-size: 20rpx;
  }

  .demo-username {
    font-size: 22rpx;
    color: $u-tips-color;
    margin-top: 5px;
    display: flex;
    flex-direction: row;

    .avatar-container {
      width: 40rpx;
      height: 40rpx;
      border-radius: 150rpx;
      overflow: hidden;
      margin-right: 10rpx;

      image {
        width: 40rpx;
        height: 40rpx;
      }
    }

    text {
      line-height: 40rpx;
    }
  }
</style>